<template>
  <div class="overview">
    <div class="breadcrumb">
      <el-icon>
        <Location />
      </el-icon>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统概览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card">
          <el-row :gutter="20" justify="center">
            <el-col :span="12" style="border-right:1px solid #ddd;">
              <div class="infoWrap">
                <el-avatar :size="100" :src="store.state.imageUrl" />
                <div class="department">所属部门：{{ store.state.department }}</div>
                <div class="identity">身份：{{ store.state.identity }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="infoWrap2">
                <div class="name">姓名：{{ store.state.name }}</div>
                <div class="sex">性别：{{ store.state.sex }}</div>
                <div class="email">邮箱：{{ store.state.email }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div id="main1"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="14">
        <el-card class="box-card">
          <div id="main2"></div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card">
          <div class="title">常用管理</div>
          <div class="itemWrap">
            <div class="item" @click="toJump('/userList')">
              <el-icon size="30">
                <UserFilled />
              </el-icon>
              <div class="name">用户管理</div>
            </div>
            <div class="item" @click="toJump('/productList')">
              <el-icon size="30">
                <Notification />
              </el-icon>
              <div class="name">产品管理</div>
            </div>
            <div class="item" @click="toJump('/messageList')">
              <el-icon size="30">
                <ChatRound />
              </el-icon>
              <div class="name">系统消息</div>
            </div>
            <div class="item" @click="toJump('/set')">
              <el-icon size="30">
                <User />
              </el-icon>
              <div class="name">个人信息</div>
            </div>
            <div class="item" @click="toJump('/set')">
              <el-icon size="30">
                <Message />
              </el-icon>
              <div class="name">部门信息</div>
            </div>
            <div class="item" @click="toJump('/set')">
              <el-icon size="30">
                <Setting />
              </el-icon>
              <div class="name">系统设置</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <el-card class="box-card-bot">
          <div id="main3"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card-bot">
          <div id="main4"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import {
  getcategoryEcharts, // 产品分类总价统计
  getusersEcharts, // 产品用户分类统计
  getNoticeEcharts,
  getLoginEcharts
} from "@/api/overview";

import * as echarts from "echarts";
import { useRouter } from "vue-router";
const router = useRouter();

// 调用store树中内容需要引入
import { useStore } from "vuex";
// 获取store
const store = useStore();

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  Message,
  Grid,
  Avatar,
  Position,
  ChatLineSquare,
  Notebook,
  UserFilled,
  User,
  Notification,
  ChatRound
} from "@element-plus/icons-vue";
//初始化函数
const eahartpie = async () => {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main1"));
  Chart.showLoading();
  let data = await getusersEcharts();
  console.log(data.data.data);
  let nameList = data.data.data.map(item => {
    return item.name;
  });
  Chart.hideLoading();

  // 绘制图表
  let options = {
    title: {
      text: "用户分类统计"
    },
    tooltip: {},

    legend: {
      orient: "vertical",
      x: "right",
      data: nameList
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      top: "0",
      containLabel: true
    },

    series: [
      {
        type: "pie", //type为pie，表示图表为饼图
        data: data.data.data
      }
    ]
  };

  // 渲染图表
  Chart.setOption(options);
};

const eahartbar = async () => {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main2"));
  Chart.showLoading();
  let data = await getcategoryEcharts();
  console.log(data.data.data.nameList);
  console.log(data.data.data.valueList);
  Chart.hideLoading();
  // 绘制图表
  let options = {
    title: {
      text: "产品分类总价统计"
    },
    tooltip: {},
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      top: "40px",
      containLabel: true
    },
    xAxis: {
      data: data.data.data.nameList
    },
    yAxis: {},
    series: [
      {
        name: "总价",
        type: "bar",
        data: data.data.data.valueList
      }
    ]
  };

  // 渲染图表
  Chart.setOption(options);
};

const eahartpie1 = async () => {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main3"));
  Chart.showLoading();
  let data = await getNoticeEcharts();
  console.log(data.data.data);
  let nameList = data.data.data.map(item => {
    return item.name;
  });
  Chart.hideLoading();
  // 绘制图表
  let options = {
    title: {
      text: "公告等级统计"
    },
    tooltip: {},
    legend: {
      // orient: "vertical",
      x: "center",
      data: nameList
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      top: "0",
      containLabel: true
    },

    series: [
      {
        type: "pie", //type为pie，表示图表为饼图
        radius: ["45%", "80%"],
        center: ["50%", "56%"],
        data: data.data.data
      }
    ]
  };
  // 渲染图表
  Chart.setOption(options);
};

const eahartline = async () => {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main4"));
  Chart.showLoading();
  let data = await getLoginEcharts();
  // let dataList = [];
  // let countList = [];
  // data.data.data.forEach(element => {
  //   dataList.push(element.date);
  //   countList.push(element.count);
  // });
  Chart.hideLoading();

  // 绘制图表
  let options = {
    title: {
      text: "最近7天的登录数量统计"
    },
    tooltip: {},
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      top: "40px",
      containLabel: true
    },
    xAxis: {
      // data: dataList
      data: data.data.data.nameList
    },
    yAxis: {},
    series: [
      {
        name: "登录数量",
        type: "line",
        // data: countList
        data: data.data.data.valueList
      }
    ]
  };
  // 渲染图表
  Chart.setOption(options);
};
const toJump = path => {
  router.push(path);
};
//声明周期函数，自动执行初始化
onMounted(() => {
  eahartpie();
  eahartbar();
  eahartpie1();
  eahartline();
});
</script>

<style scoped lang="scss">
.overview {
  height: calc(100vh - 100px);
  .infoWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 210px;
    .identity,
    .department {
      margin-top: 10px;
    }
  }
  .infoWrap2 {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    height: 210px;
    .name,
    .sex,
    .email {
      margin-bottom: 10px;
    }
  }
  #main1,
  #main2 {
    height: 210px;
  }
  #main3,
  #main4 {
    height: 240px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  .itemWrap {
    display: flex;
    flex-wrap: wrap;
    height: 195px;
    .item {
      width: 23.5%;
      margin-bottom: 6px;
      margin-right: 2%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #f0eeee;
      border-radius: 4px;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}

.breadcrumb {
  display: flex;
  margin-bottom: 10px;
}
.box-card {
  height: 250px;
  margin-bottom: 10px;
}
.box-card-bot {
  height: 280px;
}
</style>